/* 顶级容器全屏 */
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
}

/* 左边 */
.container > div:first-child {
  width: 50%;
  height: 100%;
}

/* 右边 */
.container > div:last-child {
  width: 50%;
  height: 100%;
  position: relative;
  background-image: url('../images/img1.jpg');
  background-size: cover;
  overflow: hidden;
}

/* 左上 */
.container > div:first-child > div:first-child {
  height: 50%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-image: url('../images/img2.jpg');
  background-size: cover;
}

/* 左下 */
.container > div:first-child > div:last-child {
  height: 50%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-image: url('../images/img3.jpg');
  background-size: cover;
}

/* 右边的遮罩 */
.container > div:last-child > div:last-child {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  transform: translate(100%, 0%);
  transition: transform 1s;
}

.container > div:last-child:hover > div:last-child {
  transform: translate(0%, 0%);
}

/* 左上遮罩 */
.container > div:first-child > div:first-child > div:last-child {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  transform: translate(0%, -100%);
  transition: transform 1s;
}

.container > div:first-child > div:first-child:hover > div:last-child {
  transform: translate(0%, 0%);
}
/* 左下遮罩 */
.container > div:first-child > div:last-child > div:last-child {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  transform: translate(0%, 100%);
  transition: transform 1s;
}

.container > div:first-child > div:last-child:hover > div:last-child {
  transform: translate(0%, 0%);
}

/* 两个伪元素，不存在的假的元素
 */
.demo {
  border: 1px solid #ff00ff;
}
/* ::after 表示元素之后的内容 */
.demo::after {
  content: '→';
}
/* ::before 表示元素之前的内容 */
.demo::before {
  content: '←';
}
